
<!--https://www.jx3api.com-->
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>剑网3奇遇查询网</title>
    <meta name="keywords" content="剑三奇遇查询,剑网三奇遇查询,剑三烟花查询,剑网三烟花查询,剑网三奇遇烟花">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.jx3api.com/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://www.jx3api.com/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://www.jx3api.com/static/css/bootstrap-select.min.css">
    <link rel="stylesheet" href="https://www.jx3api.com/static/css/fontawesome.css">
    <script type="text/javascript" src="https://www.jx3api.com/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.jx3api.com/static/js/popper.min.js"></script>
    <script type="text/javascript" src="https://www.jx3api.com/static/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://www.jx3api.com/static/js/bootstrap-select.min.js"></script>
    <script type="text/javascript" src='//www.recaptcha.net/recaptcha/api.js?render=6LdVYDQfAAAAACSWXwHznezpux859bED5tKXXwEa'></script>

    <style>
        .grecaptcha-badge {
            visibility: hidden;
        }

        th, td {
            width: 20%;
            text-align: center;
        }
    </style>
</head>

<body>
<div class="container">
    <br>
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#home"><i class="fas fa-gift"></i>&nbsp;奇遇查询</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#fireworks"><i class="fa fa-bullseye" aria-hidden="true"></i> 烟花查询</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#menu2"><i class="fa fa-at" aria-hidden="true"></i> 订阅烟花</a>
        </li>
    </ul>
    <div class="tab-content">
        <div id="home" class="container tab-pane active"><br>
            <div class="row">
                <div class="col-sm-3" style="padding-bottom: 15px;"><!--大区-->
                    <select id="regionSelectPicker" class="selectpicker" title="游戏大区" data-live-search="true">
                        <option value="1">电信一区</option>
                        <option value="2">电信五区</option>
                        <option value="3">电信八区</option>
                        <option value="4">双线一区</option>
                        <option value="5">双线二区</option>
                        <option value="6">双线四区</option>
                    </select>
                </div>
                <div class="col-sm-3" style="padding-left: 0;padding-bottom: 15px;">
                    <div class="col-sm-3"><!--服务器-->
                        <select id="serverSelectPicker" class="selectpicker" title="服务器" data-live-search="true">
                        </select>
                    </div>
                </div>
                <div class="col-sm-6">
                    <input type="text" class="form-control" placeholder="侠士请输入角色名，按下回车查询" id="roleName">
                </div>
            </div>
            <br>
            <div class="row">
                <table class="table table-borderless" style="text-align: center">
                    <thead>
                    <tr>
                        <th>角色名</th>
                        <th>奇遇</th>
                        <th>时间</th>
                    </tr>
                    </thead>
                    <tbody id="tableContent">
                    </tbody>
                </table>
            </div>
        </div>
        <div id="fireworks" class="container tab-pane fade"><br>
            <h3>建设中...</h3>
        </div>
        <!--        <div id="menu2" class="container tab-pane fade"><br>-->
        <!--            <h3>Menu 2</h3>-->
        <!--        </div>-->
        <!-- 模态框 -->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog modal-dialog-centered modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">提示</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div id="modalBody" class="modal-body">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    const regionMapping = {
        1: ["蝶恋花", "龙争虎斗", "长安城"],
        2: ["幽月轮", "斗转星移", "剑胆琴心", "乾坤一掷", "唯我独尊", "梦江南", "侠者成歌"],
        3: ["绝代天骄"],
        4: ["天鹅坪", "破阵子"],
        5: ["飞龙在天"],
        6: ["青梅煮酒"]
    };
    let regionId = 2;
    let serverId = 6;
    let regionSelectPicker = $("#regionSelectPicker");
    let serverSelectPicker = $("#serverSelectPicker");
    regionSelectPicker.val(regionId).selectpicker("refresh");
    serverSelectPicker.html(regionToHtml(regionId)).val(serverId).selectpicker("refresh");

    function regionToHtml(region) {
        const servers = regionMapping[region];
        let serverHtml = "";
        $.each(servers, function (index, server) {
            serverHtml += `<option value="${index + 1}">${server}</option>`
        })
        return serverHtml;
    }

    function queryData(serverId, role) {
        // console.log(serverId, role);
        const server = regionMapping[regionId][serverId - 1];
        if (server === undefined || server === null || server.length <= 0) {
            showTips("侠士请选择服务器");
            return;
        }
        grecaptcha.ready(function () {
            grecaptcha.execute("6LdVYDQfAAAAACSWXwHznezpux859bED5tKXXwEa").then(function (token) {
                // console.log(token);
                $.ajax({
                    url: "https://www.jx3api.com/web/serendipity",
                    data: {"server": server, "name": role, "limit": 15, "token": token},
                    dataType: "json",
                    type: "post",
                    async: true,
                    success: function (data) {
                        const code = data["code"];
                        if (code === 200) {
                            let lst = data["data"];
                            lst.sort(function (a, b) {
                                return b["time"] - a["time"];
                            });
                            let tableHtml = "";
                            $.each(lst, function (index, each) {
                                const time = each["time"];
                                tableHtml += `<tr><td>${each["name"]}</td><td>${each["event"]}</td><td>${time === 0 ? "未知时间" : timestampToString(time * 1000)}</td></tr>`;
                            });
                            $("#tableContent").html(tableHtml);
                        } else {
                            showTips(data["msg"])
                        }
                    }, error: function (XMLHttpRequest, textStatus, errorThrown) {
                        showTips(`获取身份错误，请刷新重试。错误信息：${textStatus}，错误码：${XMLHttpRequest.status}`);
                    }
                });
            });
        });
    }

    function showTips(content) {
        $("#modalBody").text(content)
        $("#myModal").modal("show");
    }

    function timestampToString(timestamp) {
        const date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        const Y = date.getFullYear() + '-';
        const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
        const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
        const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
        const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
        const s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
        return M + D + h + m + s;
    }

    // 大区下拉绑定事件
    regionSelectPicker.on('changed.bs.select', function (e) {
        regionId = $(this).find("option:selected").val();
        serverId = null;
        // console.log("click:" + regionId);
        serverSelectPicker.html(regionToHtml(regionId)).selectpicker("refresh");
    });
    // 服务器下拉绑定事件
    serverSelectPicker.on('changed.bs.select', function (e) {
        serverId = $(this).find("option:selected").val();
        // console.log("click:" + serverId);
        queryData(serverId);
    });
    $('#roleName').bind('keypress', function (event) {
        // 按下回车
        if (event.keyCode === 13) {
            queryData(serverId, (this).value);
        }
    });
    queryData(serverId);
</script>
</body>
</html>
